<template>
  <div class="body">
    <van-nav-bar
      title="注册游咪账号"
      left-arrow
      @click-left="onClickLeft"
      class="head"
    >
    </van-nav-bar>
    <div class="logo-1">
      <img src="../assets/img/logo登录.png" alt="" />
    </div>
    <div class="first" v-if="!cut">
      <div class="form">
        <div class="phone">
          <div>
            <span>+86</span><van-icon name="arrow-down" color="#F04A3A" />
          </div>
          <input type="text" placeholder="请输入手机号" v-model="phone" />
        </div>
        <div class="password">
          <input type="text" placeholder="请输入验证码" v-model="code" />
          <div>
            <van-button
              type="default"
              round
              :disabled="disab"
              @click="getcode"
              >{{ timeval }}</van-button
            >
          </div>
        </div>
        <button class="butt" @click="gonext">下一步</button>
      </div>
      <div class="text" v-show="text">
        {{ text }}
      </div>
    </div>
    <div class="two" v-if="cut">
      <input type="text" placeholder="用户昵称" v-model="nickname" />
      <input type="password" placeholder="请输入密码" v-model="password" />
      <input type="password" placeholder="请再次输入密码" v-model="password2" />
      <input
        type="password"
        placeholder="请设置支付密码,6位数字类型"
        v-model="zfmm"
        maxlength="6"
      />
      <button class="butt" @click="goenroll">注册</button>
      <div>
        <em
          ><van-checkbox v-model="checked" icon-size="12px"></van-checkbox
        ></em>
        <div>
          <span>我已阅读并同意</span
          ><strong>《用户使用协议,游咪隐私政策》</strong>
        </div>
      </div>
      <div class="text" v-show="text">
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from "vue";
import { NavBar, Icon, Button, Checkbox, Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  components: {
    VanNavBar: NavBar,
    VanIcon: Icon,
    VanButton: Button,
    VanCheckbox: Checkbox,
  },

  setup() {
    let phone = ref("");
    let text = ref(null);
    let cut = ref(false);
    // let cut = ref(true);
    const zfmm = ref("");
    let checked = ref(false);
    let nickname = ref(null);
    let password = ref(null);
    let password2 = ref(null);
    let timecode = ref(null);
    let sec = ref(60);
    let disab = ref(false);
    let timeval = ref("获取验证码");
    let code = ref(null);
    const router = useRouter();

    const getcode = () => {
      if (phone.value.length === 11) {
        disab.value = true;
        getCode();
        text.value = "";
        timeval.value = sec.value + "s后可用";
        const timer = setInterval(() => {
          if (sec.value == 0) {
            clearInterval(timer);
            timeval.value = "获取验证码";
            disab.value = false;
            return;
          }
          timeval.value = sec.value + "s后可用";
          sec.value--;
        }, 1000);
      } else {
        text.value = "请输入正确的手机号";
        console.log(phone.value.length, phone.value);
      }
    };
    const gonext = () => {
      if (code.value || phone.value) {
        if (timecode.value == code.value) {
          cut.value = "true";
          text.value = "";
        } else {
          text.value = "验证码不正确";
        }
      } else {
        text.value = "验证码和手机号不能为空";
      }
    };
    const onClickLeft = () => {
      router.go(-1);
    };
    const goenroll = () => {
      if (checked.value == true) {
        if (nickname.value && password.value && password2.value && zfmm.value) {
          if (password.value == password2.value) {
            Toast.success("注册成功");
            register();
          } else {
            text.value = "两次密码输入不一致";
          }
        } else {
          text.value = "内容不能为空";
        }
      } else {
        text.value = "请勾选用户协议";
      }
    };

    const getCode = () => {
      fetch(`http://2107.wqdp.com.cn/users/getsms?phone=${phone.value}`).then(
        (rsp) =>
          rsp.json().then((res) => {
            timecode.value = res.code;
            console.log(timecode.value);
            0;
          })
      );
    };
    const register = () => {
      fetch(`http://2107.wqdp.com.cn/users/register`, {
        method: "POST",
        body: JSON.stringify({
          phone: phone.value,
          username: nickname.value,
          password: password.value,
          zfmm: zfmm.value,
        }),
        headers: {
          "content-type": "application/json",
        },
      }).then((rsp) =>
        rsp.json().then((res) => {
          console.log(res);
          if (res.status == 0) {
            router.push("login");
          } else {
            text.value = res.msg;
          }
        })
      );
    };
    const texttime = () => {
      if (text.value.length > 0) {
        clearTimeout(timer1);
        const timer1 = setTimeout(() => {
          text.value = "";
        }, 5000);
      }
    };
    const watchZfmm = () => {
      zfmm.value = zfmm.value.replace(/\D/g, "");
    };
    watch((text, zfmm), (texttime, watchZfmm));
    return {
      phone,
      getcode,
      timecode,
      code,
      timeval,
      text,
      gonext,
      disab,
      sec,
      cut,
      nickname,
      password,
      password2,
      onClickLeft,
      goenroll,
      checked,
      getCode,
      zfmm,
    };
  },
};
</script>

<style lang="less" scoped>
.body {
  height: 667px;
  background-color: #fff;
}
.logo-1 {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  margin: 0 auto;
  border: 4px solid #f04a3a;
  margin-top: 27px;
  margin-bottom: 36px;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.form {
  text-align: center;
  .phone > input,
  .password > input,
  .butt {
    width: 272px;
    height: 36px;
    background: #f0f0f0;
    border-radius: 18px;
    outline: none;
    padding: 0px 20px;
    border: 0;
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: #909090;
    line-height: 36px;
  }
  .password {
    position: relative;
    > div {
      position: absolute;
      top: -2px;
      height: 36px;
      right: 52px;
      button {
        border: 0;
        font-size: 10px;
        font-family: PingFang;
        font-weight: 500;
        height: 36px;
        color: #202020;
        background: #f0f0f0;
        margin-bottom: 2px;
      }
    }
  }
  .phone {
    position: relative;
    > div {
      position: absolute;
      top: 0;
      left: 52px;
      width: 65px;
      height: 36px;
      line-height: 36px;
      border-radius: 18px 0 0 18px;
      background-color: #f0f0f0;
      font-size: 14px;
      > span {
        color: #202020;
        font-family: Helvetica;
        font-weight: 400;
        margin-right: 10px;
      }
    }
    > input {
      margin-bottom: 10px;
      padding-left: 70px;
    }
  }
  .butt {
    background: #f04a3a;
    color: #fff;
    margin-top: 10px;
  }
}
.text {
  height: 30px;
  margin: auto;
  margin-top: 30px;
  color: red;
  font-size: 14px;
  text-align: center;
}
.two {
  text-align: center;
  > input,
  .butt {
    width: 272px;
    height: 36px;
    background: #f0f0f0;
    border-radius: 18px;
    outline: none;
    padding: 0px 20px;
    border: 0;
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: #909090;
    line-height: 36px;
    margin-bottom: 10px;
  }
  > input {
    &:nth-child(4) {
      -webkit-text-security: disc;
    }
  }
  .butt {
    background: #f04a3a;
    color: #fff;
    margin-top: 10px;
  }
  > div {
    font-size: 10px;
    font-family: PingFang;
    font-weight: normal;
    color: #202020;
    overflow: hidden;
    > div {
      float: left;
      margin-left: 5px;
      > strong {
        font-weight: normal;
        color: #01b0d6;
      }
    }
    em {
      float: left;
      margin-left: 50px;
      margin-top: 2px;
    }
  }
  .text {
    color: red;
  }
}
</style>
